<script setup>
import imgNoise from '@/assets/image/monitor/noise.png'
import imgOxygen from '@/assets/image/monitor/oxy.png'
import imgPm25 from '@/assets/image/monitor/pm2.5.png'
import imgPm10 from '@/assets/image/monitor/pm10.png'
import { modelEnvDataCardItems } from '@/pages/__view-constant/index'

const props = defineProps({
  envData: {
    type: Object,
    default: () => ({}),
  },
  watchStats: {
    type: Array,
    default: () => [],
  },
  ready: {
    type: Boolean,
    default: false,
  },
})

const cardImgMap = {
  noise: imgNoise,
  oxygen: imgOxygen,
  pm25: imgPm25,
  pm10: imgPm10,
}

const isNoData = computed(() => {
  return props.ready && !props.watchStats.length
})
</script>

<template>
  <section class="env-data">
    <div class="env-data__wrap">
      <div style="height: 190px;">
        <UiSubPanel title="实时监测" stretch>
          <section class="env-data__card">
            <div v-for="(item, index) in modelEnvDataCardItems" :key="index" class="card-item" :class="[index % 2 === 1 && 'plural']">
              <div class="card-item__wrap">
                <div class="card-item__img">
                  <img
                    class="ui-panel__title--bg"
                    width="100%"
                    :src="cardImgMap[item.key]"
                  >
                </div>
                <div class="card-item__info">
                  <div>
                    <span class="card-item__value">{{ !envData[item.key] && envData[item.key] !== 0 && envData[item.key] !== '0' ? '--' : envData[item.key] }}</span>
                    <span class="card-item__unit">{{ item.unit }}</span>
                  </div>
                  <div class="card-item__label">
                    {{ item.label }}
                  </div>
                </div>
              </div>
            </div>
          </section>
        </UiSubPanel>
      </div>

      <div style="flex:1;min-height: 0;margin-top: 16px;">
        <UiSubPanel title="近期环境监测趋势分析（近10天）" stretch>
          <template v-for="(item, index) in watchStats" :key="index">
            <ChartEnvStats :data="item" :ready="ready" />
          </template>
          <UiEmpty v-show="isNoData" text="暂无监控设备" />
        </UiSubPanel>
      </div>
    </div>
  </section>
</template>

<style lang='scss' scoped>
.env-data {
  height: 100%;
  padding: 16px 0;

  &__wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  &__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    padding-top: 12px;
  }

  .card-item {
    &__wrap {
      display: flex;
      align-items: center;
      height: 66px;
      padding: 0 10px;
      background: linear-gradient(180deg,rgb(0 157 227 / 0%), rgb(0 157 227 / 20%) 100%);
      border: 1px solid;
      border-image: linear-gradient(0deg, #3d8bff 0%, rgb(61 162 255 / 0%)) 1 1;
    }

    &__img {
      width: 72px;
    }

    &__info {
      margin-left: 12px;
    }

    &__value {
      font-size: 24px;
      font-weight: 600;
      line-height: 1;
      color: #02FAFC;
    }

    &__unit {
      margin-left: 6px;
      font-size: 16px;
      color: #5D82BB;
    }

    &__label {
      font-size: 16px;
    }
  }
}
</style>
